<template>
  <div class="page bgc-fff">
    <div class="pad-l-r15 pad-t-b10 flex a-between lcenter">
      <x-input style="width: 80%;border-radius: .04rem;" class="bor-1-BBBBBB" placeholder="运单/司机/车辆信息"></x-input>
      <i @click="toNav()" class="iconfont icon-add-user f20 c-01a4f6"></i>
    </div>
    <div class="pad-l-r15">
      <flexbox :gutter="0" class="pad-b20">
        <flexbox-item :span="1/3" v-for="(item,index) in navListOne" :key="index">
          <div class="flex-demo ta-c" @click="toNav(item.link)">
            <i class="iconfont f20 c-01a4f6" :class="item.icon"></i>
            <span class="f14">{{item.title}}</span>
          </div>
        </flexbox-item>
      </flexbox>
      <flexbox :gutter="0" class="pad-b20">
        <flexbox-item :span="1/3" v-for="(item,index) in navListTwo" :key="index">
          <div class="flex-demo ta-c" @click="toNav(item.link)" >
            <i class="iconfont f20 c-01a4f6" :class="item.icon"></i>
            <span class="f14">{{item.title}}</span>
          </div>
        </flexbox-item>
      </flexbox>
      <flexbox :gutter="0" class="pad-b20 bor-bottom">
        <flexbox-item :span="1/3" v-for="(item,index) in navListThere" :key="index">
          <div class="flex-demo ta-c" @click="toNav(item.link)" >
            <i class="iconfont f20 c-01a4f6" :class="item.icon"></i>
            <span class="f14">{{item.title}}</span>
          </div>
        </flexbox-item>
      </flexbox>
    </div>
    <div class="pad-l-r15 pad-t-b10 c-01a4f6 f14">今天新运单通知</div>

		<!-- <x-button action-type="button" text="竞价" type="primary" :mini="true" @click.native="jumpbid"></x-button> -->

    <div class="mo-spacing"></div>
    <div class="main-body"
         :style="[{'-webkit-overflow-scrolling': scrollMode}]" :class="[{'bgc-fff':shipListData.length==0}]">
      <div v-if="shipListData.length==0" class="f16 ta-c pad-l-r15 mt30">您公司今天暂无运单数据</div>
      <v-loadmore v-else :top-method="loadTop" :bottom-method="loadBottom"
                  :bottom-all-loaded="allLoaded"
                  :auto-fill="false" ref="loadmore">
        <div v-for="(item,index) in shipListData" :key="index" @click="waybillClick(item)">
          <div class="waybill-item">
            <!-- con-1 -->
            <div class="flex a-between l-center mb10 pad-l-r15">
              <div class="flex a-left l-center">
                <img :src="staticImgData.imgurla" class="icon-tou mr15" alt="">
                <span class="c-1E90FF f16 bold mr5">运单通知</span>
                <span class="c-1E90FF f16">{{item.code}}</span>
              </div>
              <div>
                <!-- 拓展预留 -->
              </div>
            </div>
            <div class="pad-l-r30 pad-t10 f14 c-333 flex l-center a-start" >
              <span class="c-999">司机：</span><span class="mr10">{{item.driverName}}</span>
              <span class="c-999">车牌号：</span><span>{{item.transportationId}}</span>
            </div>
            <!-- con-2 -->
            <div class="pad-l-r15 bor-bottom" >
              <div v-show="index2 < 2"  v-for="(item2,index2) in item.shipTaskCountBos" :key="index2"
                    :class="[{'bor-bottom':index2 <(2-1)}]">
                <div class="f14 c-333 pad15 ta-l flex l-center a-start" >
                  <span class="c-999">运输任务：</span><span>{{item2.taskCode}}</span>
                </div>
                <div class="f12 c-999 f-l ta-l pad-l-r15">
                  {{item2.gmtCreate|parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
                </div>
                <!-- con-3 -->
                <div class="f14 c-000 mt20  pad-l-r15" >
                  <div class="flex a-between l-center mb15">
                    <p class="c-666">起运地：</p>
                    <p v-if="item2.startAddress">{{item2.startAddress}}</p>
                    <p v-else>暂无</p>
                  </div>
                  <div class="flex a-between l-center mb15">
                    <p class="c-666">目的地：</p>
                    <p v-if="item2.endAddress">{{item2.endAddress}}</p>
                    <p v-else>暂无</p>
                  </div>
                  <div class="flex a-between l-center mb15">
                    <p class="c-666">运抵时间：</p>
                    <p v-if="item2.gmtDeliver">{{item2.gmtDeliver|parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                    <p v-else>暂无</p>
                  </div>
                  <div class="flex a-between l-center">
                    <p class="c-666">车辆台数：</p>
                    <p v-if="item2.itemCount">{{item2.itemCount}}台</p>
                    <p v-else>暂无</p>
                  </div>
                  <div style="height:.2rem;"></div>
                </div>
              </div>
            </div>
            <!-- con-4 -->
            <div class="f16 c-1E90FF ta-r h100 line-h100 pad-l-r15">
              详情 <i class="iconfont icon-arrow-right3 f14"></i>
            </div>
          </div>
          <div class="mo-spacing"></div>
        </div>
      </v-loadmore>
      <div style="height:.5rem;"></div>
    </div>
    <v-tabbar></v-tabbar>
    <confirm
      v-model="confirmShow"
      :show-cancel-button="false"
      :title="confirmData.title"
      @on-confirm="onConfirm">
      <p style="text-align:center;">{{confirmData.context}}</p>
    </confirm>
    <v-loading v-show="loadingShow"></v-loading>
  </div>
</template>

<script >
  import LisaTabbar from '@/components/common/tabbar/tabbar'
  import { XButton, XInput, Flexbox, FlexboxItem, Divider, Confirm } from 'vux'
  import { mapState } from 'vuex'
  import { Loadmore, Toast } from 'mint-ui'
  import Loading from '@/components/common/loading/loading'
  import * as ThreeStorage from '@/utils/store/token.js'
  import * as TenantApi from '@/api/tenant'
  import * as SessionS from '@/utils/store/storage'
  export default {
    name: 'admin-home',
    data() {
      return {
        loginType: '',
        navName: '', // footer_nav 传选中nav的name
        staticImgData: {
          imgurla: require('@/assets/image/v1/waybill/waybill_list/icon_tou.png')
        },
        navListOne: [
          { title: '运单', icon: 'icon-car-shipOrder', link: 'shipOrder-list' },
          { title: '在途', icon: 'icon-position', link: '' },
          { title: '收入', icon: 'icon-card-income', link: '' }
        ],
        navListTwo: [
          { title: '支付', icon: 'icon-card-pay', link: '' },
          { title: '查看报班', icon: 'icon-see-checkIn', link: 'me-adminCheckinList' },
          { title: '车队', icon: 'icon-fleet', link: 'me-adminFleetList' }
        ],
        navListThere: [
          { title: '司机', icon: 'icon-driver', link: 'me-adminDriverList' },
          { title: '牵引车', icon: 'icon-carrier', link: 'me-adminVehicleList' },
          { title: '挂车', icon: 'icon-tarrier', link: 'me-adminTarrierList' }
        ],
        shipListData: [],
        page: {
          current: 1,
          size: 2,
          total: 1,
          condition: {
            gmtCreate: 0,
            tenantId: ''
          }
        },
        gmtCreateStamp: 1533541209000, // 8-6号时间戳
        confirmShow: false, // vux-confirm提示弹窗
        confirmData: {
          title: '提示',
          context: '正在建设中,后续开放...'
        },
        loadingShow: false,
        allLoaded: false, // 是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
        scrollMode: 'auto' // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      }
    },
    computed: {
      ...mapState({
        DriverId: state => state.account.DriverId
      })
    },
    components: {
      XButton, XInput, Flexbox, FlexboxItem, Divider, Confirm,
      'v-loadmore': Loadmore,
      'v-loading': Loading,
      'v-tabbar': LisaTabbar
    },
    created() {
      this.loadPageList()
    },
    methods: {
    //       jumpbid: function() {
    //         this.$router.push({ name: 'bid-home' })
    //       },
      onConfirm: function() {
        console.log('confirm()-确定')
      },
      toNav: function(name) {
        if (name) {
          this.$router.push({ name: name })
        } else {
          this.confirmShow = true // vux提示弹窗
        }
      },
      loadTop: function() { // 组件提供的下拉触发方法
        // 下拉加载
        this.loadingShow = true
        this.allLoaded = false// 刷新时置为true
        this.page.current = 1// 从第1页开始
        this.loadPageList()
        this.$refs.loadmore.onTopLoaded() // 固定方法，查询完要调用一次，用于重新定位
      },
      loadBottom: function() {
        // 上拉加载
        this.loadingShow = true
        this.getMore() // 上拉触发的分页查询
        this.$refs.loadmore.onBottomLoaded() // 固定方法，查询完要调用一次，用于重新定位
      },
      loadPageList: function() {
        // 查询数据
        const that = this
        this.gmtCreateStamp = Date.parse(new Date())
        const tenant_Id = ThreeStorage.getTenantId()
        that.page = {
          current: 1,
          size: 2,
          total: 1,
          condition: {
            gmtCreate: this.gmtCreateStamp,
            tenantId: tenant_Id
          }
        }
        that.loadingShow = true
        TenantApi.companyShipList(that.page).then(res => {
          // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
          if (res.code === 0) {
            that.shipListData = res.data.records
            if (that.page.current > 1) {
              that.isHaveMore(res.data)
            }
            that.loadingShow = false
          } else {
            console.warn('error', res)
            that.loadingShow = false
          }
          that.$nextTick(function() {
            that.scrollMode = 'touch'
          })
        }).catch(res => {
          this.loadingShow = false
          console.log('error', res)
        })
      },
      getMore: function() {
        // 分页查询
        const that = this
        that.page.current = parseInt(that.page.current) + 1
        TenantApi.companyShipList(that.page).then(res => {
          this.loadingShow = false
          if (res.code === 0) {
            that.shipListData = that.shipListData.concat(res.data.records)
            if (that.page.current > 1) {
              that.isHaveMore(res.data)
            }
          }
        }).catch(res => {
          this.loadingShow = false
          console.warn('error', res)
        })
      },
      isHaveMore: function(data) {
        // 是否还有下一页，如果没有就禁止上拉刷新
        const that = this
        const now_show_num = that.shipListData.length
        const get_total = data.total
        if (now_show_num < get_total) {
          // 展示的条数 小于 后端总条数 还可以下拉加载更多
          console.log('可继续下拉加载更多')
          this.allLoaded = false
        } else if (now_show_num === get_total) {
          // 展示的条数 等于 后端总条数 没有更多数据 不能进行下拉加载
          console.log('没有更多数据，不能进行下拉')
          this.allLoaded = true
          Toast({
            message: '没有更多数据了',
            duration: 1000
          })
        }
      },
      waybillClick: function(item) {
        console.log('shipOrder-driverDetail', item)
        const that = this
        SessionS.saveToSession('waybillItem', item)
        that.$router.push({ name: 'shipOrder-adminDetail', params: { waybillItem: item }})
        // this.confirmShow = true // vux提示弹窗
      }
    }
  }
</script>

<style scoped>
  @import '../../styles/util.css';
  /* common */
  .page{
    overflow-y: auto;
    background-color: #f4f4f4;
  }
  .page.bgc-fff{
    background-color: #fff;
  }
  .h100{
    height: .5rem;
  }
  .line-h100{
    line-height: .5rem;
  }
  .waybill-item{
    padding:.21rem 0 0 0;
    background-color: #fff;
    border-radius: .04rem;
  }
  .icon-tou{
    width: .04rem;
    height: .15rem;
  }
  div>span{
    display: block;
  }
  /* 禁掉 vux-ui中 使用 weui-ui 中的样式 */
  .weui-cell{
    padding: 0 0 0 .05rem;
  }
</style>
